<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 200px;
            position: absolute;
            left: 300px;
            top: 100px;
            background-color: aqua;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: red;
            user-select: none;

        }

        .canvas{
            width: 300px;
            height: 200px;
            position: absolute;
            left: 300px;
            top: 100px;
            z-index: 2;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">谢谢参与</div>
    <canvas class="canvas"></canvas>
</body>
<script>
    var box = document.querySelector(".box");
    var canvas = document.querySelector(".canvas");

    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(0,0,300,200); // 绘制矩形
    ctx.filStyle = "#c0c0c0";
    ctx.fill();
    ctx.closePath();

    canvas.onmousedown = function(e){
        canvas.onmousemove = function(e){
            e = e||window.event;

            var x = e.pageX - canvas.offsetLeft;
            var y = e.pageY - canvas.offsetTop;

            ctx.clearRect(x,y,20,20);
        }
        canvas.onmouseup = function(){
            canvas.onmousemove = null;
        }

    }

    arr = ["1等奖","2等奖","3等奖","4等奖","谢谢惠顾","再买一次"];

    var i = Math.floor(Math.random()*arr.length);

    box.textContent = arr[i];
</script>
</html>